<template>
    <!-- 购物车头部组件 -->
  <div id="CartTop">
    <catrtop />
  </div>
  <!-- 主题部分，订单详情 -->
   <div style="display: flex; flex-direction: column; align-items: center;" id="Catalog" 
   v-if="orderData && lineItems">
    <table style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      <thead>
        <tr>
          <th colspan="2">Order#{{ orderId }} {{ formattedOrderDate }}</th>
        </tr>
        
      </thead>
      <tbody>
        <tr>
          <th colspan="2">Payment Details</th>
        </tr>
        <tr>
          <td>Card Type:</td>
          <td>{{ orderData.cardType }}</td>
        </tr>
        <tr>
          <td>Card Number:</td>
          <td>{{ orderData.creditCard }}</td>
        </tr>
        <tr>
          <td>Expiration Date:</td>
          <td>{{ orderData.expireDate }}</td>
        </tr>
        <tr>
          <th colspan="2">Billing Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>{{ orderData.billToFirstName }}</td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>{{ orderData.billToLastName }}</td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>{{ orderData.billAddress1 }}</td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>{{ orderData.billAddress2 }}</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>{{ orderData.billCity }}</td>
        </tr>
        <tr>
          <td>State:</td>
          <td>{{ orderData.billState }}</td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>{{ orderData.billZip }}</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>{{ orderData.billCountry }}</td>
        </tr>
        <tr>
          <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>{{ orderData.shipToFirstName }}</td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>{{ orderData.shipToLastName }}</td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>{{ orderData.shipAddress1 }}</td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>{{ orderData.shipAddress2 }}</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>{{ orderData.shipCity }}</td>
        </tr>
        <tr>
          <td>State:</td>
          <td>{{ orderData.shipState }}</td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>{{ orderData.shipZip }}</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>{{ orderData.shipCountry }}</td>
        </tr>
        <!-- <tr>
          <td colspan="2">Status:&nbsp;{{ status }}</td>
        </tr> -->
      </tbody>
    </table>
    <table style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      <thead>
        <tr>
          <th>ItemID</th>
          <!-- <th>Description</th> -->
          <th>Quantity</th>
          <th>Price</th>
          <th>Status</th>
          <th>Total</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in lineItems" :key="index">
          <td>{{ item.lineItem.itemId }}</td>
          <!-- <td>{{ item.lineItem.itemId }}</td> 这里的 Description 暂时使用 itemId -->
          <td>{{ item.lineItem.quantity }}</td>
          <td>{{ item.lineItem.unitPrice }}</td>
          <td :style="{ color: item.orderStatus.status === 'Z' ? 'green' : 'red' }">
                    {{ item.orderStatus.status === 'Z' ? '已发货' : '未发货' }}
          </td>
          <td>{{ (item.lineItem.quantity * item.lineItem.unitPrice).toFixed(2) }}$</td>
        </tr>
        <tr>
          <th colspan="5">Total:&nbsp;{{ orderData.totalPrice.toFixed(2) }}$</th>
          
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- 购物车底部组件 -->  
  <div id="CartBottom">
    <cartbottom />
  </div>
</template>


<script setup>
import { ref, onMounted ,computed} from 'vue';
import catrtop from '../components/CartPageTop.vue';
import cartbottom from '../components/CartPageBottom.vue';
import axios from 'axios'; // 假设你已经安装了axios;
//import router from '../router';
import { useRoute } from 'vue-router'; 
const router = useRoute(); // 确保在组件中正确使用useRouter钩子函数
//没有传递过来
const orderId = ref(router.query?.orderId); // 使用可选链操作符并修正拼写错误
const order = ref({});
const orderData = ref(null);
const lineItems = ref([]);
const status = ref(''); // 用于存储状态信息



onMounted(async () => {
    if (orderId.value) {
      console.log("orderId", orderId.value); // 打印orderId以确保它被正确传递
        try {
            const response = await axios.get(`/api/order/${orderId.value}`,
              {
                headers: {
                     'Authorization': localStorage.getItem('token'),
                  
                }
              });
            order.value = response.data.data;
            orderData.value = order.value.orders;
            lineItems.value = order.value.lineItemVos;
            console.log("lineItems", lineItems.value);
            // 获取首个 lineItemVos 元素的 status 值
      if (lineItems.value.length > 0) {
        status.value = lineItems.value[0].orderStatus.status;
      }
            console.log("get order", order.value);
        } catch (error) {
            console.error('Error fetching order details:', error);
        }
    } else {
        console.error('orderId is not provided in the route query.');
    }
});


const formattedOrderDate = computed(() => {
  const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
  const date = new Date(orderData.value.orderDate);
  return date.toLocaleString('en-US', options);
});
</script>
<style scoped>
#Catalog {
  
  margin-bottom: 15vh;
}


.table-container {
  width: 60%;
  background-color: #e9e9e9;
  border-collapse: collapse;
  border: 3px white;
  
}

.table-container th{
  border: 2px solid white;
  font-size: 25px;
  font-weight: 900;
  text-align: left;
}
.table-container td {
  border: 2px solid white;
  padding: 8px;
  text-align: left;
  font-size: 25px;
}


</style>